<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="pane-shell">
      <search @sumbit="sumbit">
        <!-- 搜索项 -->
        <template slot="form">
          <el-form :inline="true"
                   @submit.native.prevent
                   :model="dataForm"
                   ref="dataForm">
            <el-form-item prop="carNumber">
              <el-input v-model.trim="dataForm.carNumber"
                        class="form-item"
                        clearable
                        placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item prop="peopleNumber">
              <el-input v-model.trim="dataForm.peopleNumber"
                        class="form-item"
                        clearable
                        placeholder="请输入随行人数"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.useStatus"
                         clearable
                         placeholder="状态">
                <el-option v-for="item in useStatusList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
      </search>

      <table-template :tableData="tableData"
                      :loading="dataListLoading"
                      :fieldManagement="false"
                      :dataList="dataList">
        <template slot="peopleNumber-after">
          <el-table-column prop="type"
                           label="用车时段"
                           header-align="center"
                           align="center"
                           width="300">
            <template slot-scope="scope">
              <span v-if="scope.row.startTime">{{ scope.row.startTime }} ~ {{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
        </template>
        <template slot="destination-after">
          <el-table-column prop="useStatus"
                           align="center"
                           label="状态"
                           min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus === '0'">待使用</span>
              <span v-if="scope.row.useStatus === '1'"
                    class="success">使用中</span>
              <!-- <span v-if="scope.row.useStatus === '2'"
                >待核验
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.reason ? scope.row.reason : '未填写'"
                  placement="top-start"
                >
                  <span style="color: blue">原因</span>
                </el-tooltip></span
              > -->
              <span v-if="scope.row.useStatus === '2'">待核验 </span>
              <span v-if="scope.row.useStatus === '3'">已结束 </span>
              <span v-if="scope.row.useStatus === '4'">退回待修改 </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="100">
          <!-- 操作栏 -->
          <template slot-scope="scope">
            <el-button v-if="scope.row.useStatus === '0'"
                       type="text"
                       class="brand"
                       size="small"
                       @click="open(scope.row)">开始用车</el-button>
            <el-button v-if="scope.row.useStatus === '1'"
                       type="text"
                       class="brand"
                       size="small"
                       @click="open(scope.row)">结束用车</el-button>
            <el-button v-if="scope.row.useStatus === '2'"
                       type="text"
                       class="brand"
                       size="small"
                       @click="open(scope.row)">查看</el-button>
            <el-button v-if="scope.row.useStatus === '3'"
                       type="text"
                       class="brand"
                       size="small"
                       @click="open(scope.row)">修改</el-button>
            <el-button v-if="scope.row.useStatus === '4'"
                       type="text"
                       class="brand"
                       size="small"
                       @click="open(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- <initiate ref="child" /> -->
      <div :dataList="dataList">
        <el-dialog title="开始用车"
                   :visible.sync="cancelApply">
          <div class="backg">
            <div>申请人信息</div>
            <div class="left-right">
              <div>姓名：{{ this.list.creatorName }}</div>
              <div>部门：{{ this.list.deptName }}</div>
              <div>联系电话：{{ this.list.phone }}</div>
              <div>用车理由：{{ this.list.marks }}</div>
            </div>
            <div class="left-right">
              <div>车牌号码：{{ this.list.carNumber }}</div>
              <div>
                用车时段：{{ this.list.startTime }} ~ {{ this.list.endTime }}
              </div>
              <div>随行人数：{{ this.list.peopleNumber }}</div>
              <div>目的地：{{ this.list.destination }}</div>
            </div>
          </div>
          <el-form :model="form">
            <el-form-item class="fontSize"><span>*车辆当前里程数：</span>
              <el-input v-model="form.mileage"
                        style="width:240px;"
                        autocomplete="off"></el-input><span> 公里</span>
            </el-form-item>
            <el-form-item class="fontSize">
              <span>*车辆当前油表数：</span>
              <el-input v-model="form.oil"
                        style="width:240px"
                        autocomplete="off"></el-input><span> 升</span>
            </el-form-item>
            <el-form-item class="fontSize">
              <span>*车辆当前里程油表数拍照：</span>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="open">取 消</el-button>
            <el-button @click="temporary">临时</el-button>
            <el-button type="primary"
                       @click="open">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import mixinViewModule from "@/mixins/view-module";
import minFormValidate from "@/mixins/form-validate";
import tableTemplate from "@/components/table-template";
import Search from "@/components/search/search";
import initiate from "./initiate-add-or-update.vue";
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: "",
  data() {
    return {
      mixinViewModuleOptions: { 
        getDataListURL: "tb/carApply/getUse", // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: "", // 添加或修改接口，API地址
        getDataInfoURL: "", // 数据详情，API地址
        updateStatusURL: "",
        deleteURL: "", // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: "", // 导出接口，API地址
      },
      cancelApply: false,
      list: [],
      form: {
         mileage:'',
         oil:'',
      },
      dataForm: {
        carNum: "",
        type: "",
        sum: "",
        useStatus: "",
      },
      typeList: [
        {
          // 车辆类型
          id: "1",
          name: "小型车",
        },
        {
          id: "2",
          name: "中型车",
        },
        {
          id: "3",
          name: "轿车",
        },
        {
          id: "4",
          name: "SUV",
        },
        {
          id: "5",
          name: "MPV",
        },
        {
          id: "6",
          name: "大货车",
        },
        {
          id: "7",
          name: "面包车",
        },
      ],
      useStatusList: [
        // 状态列表
        { id: "0", name: "待审核" },
        { id: "1", name: "通过" },
        { id: "2", name: "不通过" },
        // { id: "3", name: "已取消" },
      ],
    };
  },
  components: { tableTemplate, Search, initiate },
  computed: {
    tableData() {
      return [
        { label: "申请时间", width: "150", prop: "createDate" },
        { label: "申请人", width: "100", prop: "creatorName" },
        { label: "所属部门", width: "100", prop: "deptName" },
        { label: "联系电话", width: "100", prop: "phone" },
        { label: "随行人数", width: "100", prop: "peopleNumber" },
        { label: "用车理由", width: "150", prop: "marks" },
        { label: "目的地", width: "100", prop: "destination" },
        { label: "分配车牌号", width: "120", prop: "carNumber" },
      ];
    },
  },
  mounted() {},
  methods: {
    sumbit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit();
        }
      });
    },
    // open() { temporary
    //   this.$refs.child.open()
    // }, 
   async temporary() {
  //      this.list = await this.getDataList({ url: this.mixinViewModuleOptions.getDataListURL})
    },
    open(scope) {
      this.list=scope
      if (this.cancelApply == false) {
        this.cancelApply = true;
      } else {
        this.cancelApply = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.backg {
  background-color: #f1f1f1;
  padding: 10px;
  color: #000;
  font-size: 18px;
  margin-bottom: 20px;
  .left-right {
    display: inline-block;
    width: 50%;
    padding-left: 10px;
  }
  .left-right > div {
    margin: 10px 0px;
  }
}
.fontSize {
  color: #000;
}
.fontSize > span {
  margin: 0px 10px;
}
</style>